Vue.component("aui-select-caption", {
    template: ``
});

Vue.component("aui-select-option", {
    template: `
        <li :class="{selected: selected}" @click="handleSelect"><a>{{label}}</a></li>
    `,
    props: {
        key: {
            type: String
        },
        value: {
            required: true
        },
        label: [String, Number]
    },
    data() {
        var ret = {};
        ret.selected = false;
        return ret;
    },
    methods: {
        handleSelect() {
            var self = this;
            self.$parent.$emit("input", self.value);
            self.$emit("select");
        }
    }
});

Vue.component("aui-select", {
    template: `
        <div class="dropdown aui-select">
          <button class="btn btn-default dropdown-toggle" ref="dropdowntoggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span v-html="currentlabel"></span>
            <span class="caret"></span>
          </button>
          <ul ref="menu" class="dropdown-menu">
            <slot></slot>
          </ul>
        </div>            
    `,
    props: {
        value: {
            required: true
        },
        options: {
            required: true
        }
    },
    data() {
        var self = this;
        var ret = {};
        ret.currentLabel = this.value;
        return ret;
    },
    mounted() {
        var self = this;
        self.anuElement = {};
        self.anuElement.element = $(self.$el);
        $(self.$refs.dropdowntoggle).dropdown();
        self.changeOptionSelect();
        self.anuElement.element.on('show.bs.dropdown', function () {    
            self.$emit("open");
        })
    },
    computed: {
        currentlabel: function (newval, oldval) {
            var self = this;
            if (self.options && self.options.length > 0) {
                if (self.value || self.value == 0) {
                    var s = _.find(self.options, function(o) {
                        if (self.value === 0) {
                            return o.value === self.value;
                        }
                        return o.value == self.value;
                    });
                    if (s) {
                        setTimeout(function () {
                            self.changeOptionSelect();
                        }, 0);
                        return s.label;
                    } else {
                        console.error("select is error")    
                    }                    
                } else {
                    if (self.options.length > 0) {
                        return self.options[0].label;
                    }
                }
            }
        }
    },
    methods: {
        changeOptionSelect() {
            var self = this;
            if (self.$children && self.$children.length > 0) {
                _.forEach(self.$children, function (v, k) {
                    if (v.value === self.value) {
                        if (!v.selected) {
                            v.selected = true;
                        }
                    } else {
                        if (v.selected) {
                            v.selected = false;
                        }
                    }
                });
            }
        },
        setsomething() {
            var self = this;
        },
        scrollIntoView(options) {
            var self = this;
            self.$refs.menu.scrollTop = 0;
        }
    }
});